<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习进度 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="app-content">
            <!-- 进度头部 -->
            <div class="mb-6 flex justify-between items-center">
                <div>
                    <a href="home.html" class="inline-flex items-center text-gray-600">
                        <i class="fas fa-arrow-left mr-2"></i>
                        <span>学习进度</span>
                    </a>
                </div>
                <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            
            <!-- 总体进度 -->
            <div class="card p-4 mb-6">
                <h2 class="font-semibold text-lg mb-4">总体学习进度</h2>
                
                <div class="flex mb-6">
                    <div class="w-1/2">
                        <div class="relative w-36 h-36 mx-auto">
                            <!-- 圆形进度条 - 实际应用中应使用Canvas或SVG实现 -->
                            <div class="absolute inset-0 rounded-full border-8 border-gray-200"></div>
                            <div class="absolute inset-0 rounded-full border-8 border-blue-500 border-t-transparent border-right-transparent" style="transform: rotate(130deg)"></div>
                            <div class="absolute inset-0 flex items-center justify-center flex-col">
                                <span class="text-3xl font-bold text-gray-800" data-bind="progress.learnedWords"></span>
                                <span class="text-sm text-gray-500">已学单词</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="w-1/2 flex flex-col justify-center">
                        <div class="mb-3">
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600">总词汇量</span>
                                <span class="font-medium text-gray-800" data-bind="progress.totalWords"></span>
                            </div>
                            <div class="progress-bar h-2">
                                <div class="progress-fill" style="width: 100%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600">已学习</span>
                                <span class="font-medium text-gray-800" data-bind="progress.learnedWords"></span>
                            </div>
                            <div class="progress-bar h-2">
                                <div class="progress-fill" style="width: 35%"></div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600">已复习</span>
                                <span class="font-medium text-gray-800" data-bind="progress.reviewedWords"></span>
                            </div>
                            <div class="progress-bar h-2">
                                <div class="progress-fill" style="width: 25%"></div>
                            </div>
                        </div>
                        
                        <div>
                            <div class="flex justify-between text-sm mb-1">
                                <span class="text-gray-600">已掌握</span>
                                <span class="font-medium text-gray-800" data-bind="progress.masteredWords"></span>
                            </div>
                            <div class="progress-bar h-2">
                                <div class="progress-fill" style="width: 20%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="flex">
                    <div class="w-1/3 text-center">
                        <div class="text-lg font-bold text-gray-800" data-bind="progress.streak"></div>
                        <div class="text-xs text-gray-500">连续学习天数</div>
                    </div>
                    
                    <div class="w-1/3 text-center">
                        <div class="text-lg font-bold text-gray-800">25</div>
                        <div class="text-xs text-gray-500">平均每日单词</div>
                    </div>
                    
                    <div class="w-1/3 text-center">
                        <div class="text-lg font-bold text-gray-800">85%</div>
                        <div class="text-xs text-gray-500">复习正确率</div>
                    </div>
                </div>
            </div>
            
            <!-- 学习趋势 -->
            <div class="card p-4 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="font-semibold text-lg">学习趋势</h2>
                    <div class="flex">
                        <button class="badge badge-primary mr-2">周</button>
                        <button class="badge">月</button>
                    </div>
                </div>
                
                <div class="bg-gray-50 rounded-lg p-3">
                    <div class="flex items-end h-48 justify-between">
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 32%"></div>
                            <div class="text-xs text-gray-500 mt-1">一</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 45%"></div>
                            <div class="text-xs text-gray-500 mt-1">二</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 68%"></div>
                            <div class="text-xs text-gray-500 mt-1">三</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 48%"></div>
                            <div class="text-xs text-gray-500 mt-1">四</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 40%"></div>
                            <div class="text-xs text-gray-500 mt-1">五</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 52%"></div>
                            <div class="text-xs text-gray-500 mt-1">六</div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div class="bg-blue-400 w-8 rounded-t" style="height: 25%"></div>
                            <div class="text-xs text-gray-500 mt-1">日</div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-4 flex justify-between text-sm text-gray-500">
                    <div>总计学习单词：<span class="font-medium text-gray-700">207</span></div>
                    <div>平均每日：<span class="font-medium text-gray-700">29.6</span></div>
                </div>
            </div>
            
            <!-- 词库进度 -->
            <h2 class="font-semibold text-lg mb-4">词库进度</h2>
            
            <div class="space-y-4">
                <div class="card p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium">雅思核心词汇</h3>
                        <span class="text-sm text-gray-500">3000词</span>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 65%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-sm text-gray-500">已学习 65%</span>
                        <span class="text-sm text-gray-500">已掌握 48%</span>
                    </div>
                </div>
                
                <div class="card p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium">商务英语词汇</h3>
                        <span class="text-sm text-gray-500">2500词</span>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 42%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-sm text-gray-500">已学习 42%</span>
                        <span class="text-sm text-gray-500">已掌握 32%</span>
                    </div>
                </div>
                
                <div class="card p-4">
                    <div class="flex justify-between items-center mb-2">
                        <h3 class="font-medium">旅行英语词汇</h3>
                        <span class="text-sm text-gray-500">1200词</span>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: 88%"></div>
                    </div>
                    
                    <div class="flex justify-between items-center mt-2">
                        <span class="text-sm text-gray-500">已学习 88%</span>
                        <span class="text-sm text-gray-500">已掌握 75%</span>
                    </div>
                </div>
            </div>
            
            <!-- 学习成就 -->
            <h2 class="font-semibold text-lg mb-4 mt-8">学习成就</h2>
            
            <div class="grid grid-cols-3 gap-4 mb-6">
                <div class="card p-3 flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
                        <i class="fas fa-trophy text-yellow-500"></i>
                    </div>
                    <span class="text-xs font-medium">坚持不懈</span>
                    <span class="text-xs text-gray-500">连续学习15天</span>
                </div>
                
                <div class="card p-3 flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2">
                        <i class="fas fa-fire text-orange-500"></i>
                    </div>
                    <span class="text-xs font-medium">单词大师</span>
                    <span class="text-xs text-gray-500">掌握1000词</span>
                </div>
                
                <div class="card p-3 flex flex-col items-center text-center">
                    <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-2 opacity-50">
                        <i class="fas fa-bolt text-gray-400"></i>
                    </div>
                    <span class="text-xs font-medium text-gray-400">闪电记忆</span>
                    <span class="text-xs text-gray-400">连续正确50词</span>
                </div>
            </div>
        </div>
        
        <div class="navbar"></div>
    </div>
    
    <script src="../js/main.js"></script>
</body>
</html> 